<template>
  <div>
    <div class="headtitle">
      {{ title }}
    </div>
    <div class="conditionForm">
      <el-form :inline="true" ref="queryForm" :model="queryForm">
        <el-form-item label="分类名">
          <el-input v-model="queryForm.cname" placeholder="分类名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getList()" type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="showAddDialog" type="primary">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table">
      <el-table :data="tableData" border style="width: 100%;text-align:center">
        <el-table-column prop="id" label="编号" width="300px">
        </el-table-column>

        <el-table-column prop="cname" label="分类名"> </el-table-column>

        <el-table-column prop="pcname" label="父类名"> </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="showEditDialog(scope.row)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button @click="doDelete(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageSty"
        background
        layout="prev, pager, next"
        :current-page.sync="queryForm.pageNo"
        :page-size="queryForm.pageSize"
        :total="queryForm.recordTotal"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <el-dialog title="添加分类" :visible.sync="dialogAddFormVisible">
      <el-form
        :inline="true"
        ref="dataForm"
        :model="dataForm"
        label-width="120px"
      >
        <el-form-item label="分类名">
          <el-input v-model="dataForm.cname"></el-input>
        </el-form-item>
        <el-form-item label="父类别">
          <el-select v-model="dataForm.pid" placeholder="请选择">
            <el-option
              v-for="item in pcategories"
              :key="item.id"
              :label="item.cname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="">添加</el-button>
          <el-button @click="dialogAddFormVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="修改分类" :visible.sync="dialogEditFormVisible">
      <el-form
        :inline="true"
        ref="dataForm"
        :model="dataForm"
        label-width="120px"
      >
        <el-form-item label="分类名">
          <el-input v-model="dataForm.cname"></el-input>
        </el-form-item>
        <el-form-item label="父类别">
          <el-select v-model="dataForm.pid" placeholder="请选择">
            <el-option
              v-for="item in pcategories"
              :key="item.id"
              :label="item.cname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="">修改</el-button>
          <el-button @click="dialogEditFormVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCategoriesByCondition,
  getCategories,
  getCategoryById,
  deleteCategory,
} from "../../api/Categories/Categories";
export default {
  name: "CateTable",
  data() {
    return {
      title: "分类管理",
      queryForm: {
        cname: "",
        pageNo: 1,
        pageSize: 18,
        recordTotal: 100,
      },
      dialogAddFormVisible: false,
      dialogEditFormVisible: false,
      tableData: [],
      dataForm: {},
      pcategories: [],
    };
  },
  methods: {
    getList() {
      var _this = this;
      getCategoriesByCondition(_this.queryForm)
        .then((res) => {
          if (res.data.result != null) {
            _this.tableData = res.data.result;
          }
          _this.queryForm.recordTotal = res.data.recordTotal;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange(currentPage) {
      this.queryForm.pageNo = currentPage;
      this.getList();
    },
    showAddDialog() {
      this.dataForm = {};
      this.loadPCategoris();
      this.dialogAddFormVisible = true;
    },
    showEditDialog(categoryinfo) {
      this.dataForm = {};
      this.loadPCategoris();
      getCategoryById(categoryinfo.id).then((res) => {
        if (res.flag) {
          this.dataForm.cname = res.data.cname;
          this.dialogEditFormVisible = true;
        }
      });
    },
    doDelete(categoryinfo) {
      var _this = this;
      this.$confirm("此操作将永久删除该分类, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteCategory(categoryinfo.id).then((res) => {
          if (res.flag) {
            _this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
          _this.getList();
        });
      });
    },
    loadPCategoris() {
      getCategories().then((res) => {
        if (res.flag) {
          this.pcategories = res.data;
        }
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>
<style scoped>
.headtitle {
  text-align: left;
  padding: 5px;
  border-bottom: 1px lightgrey solid;
  color: gray;
}
.conditionForm {
  width: 80%;
  margin: 50px auto 0px auto;
}
.table {
  text-align: center !important;
}
.pageSty {
  position: absolute;
  left: 75%;
  bottom: 5%;
}
</style>
